<template>
  <div>
    <div class="box" :style="{ background: boxBg }">
      <div class="container">
        <div class="qiu" v-show="show">
          <div
            @click="set_color(i)"
            class="every"
            v-for="(v, i) in color"
            :key="i"
            :style="{ background: v }"
          ></div>
        </div>
        <div
          class="main"
          :style="{ background: mainBg }"
          @click="$store.commit('SET_SHOW')"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState(['color', 'show', 'boxBg', 'mainBg']),
  },
  methods: {
    ...mapMutations({
      set_color: 'SET_COLOR',
    }),
  },
}
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
.box {
  width: 100vw;
  height: 100vh;
  transition: all 0.3s;
}
.container {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.main {
  background-color: #e16969;
  width: 100px;
  height: 100px;
  transition: all 0.3s;
  border: 6px solid #fff;
  border-radius: 50%;
  box-shadow: 3px 3px 10px rgb(0 0 0 / 60%);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.qiu {
  width: 100%;
  height: 100%;
  position: relative;
}
.every {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 6px solid #fff;
  display: inline-block;
}
</style>
